{extend name='public/layout' /}
{block name='content'}
<script src="__JS__/amazeui.min.js"></script>
<div class="fang-main">
    <div class="am-input-group">
        <input type="text" class="am-form-field" id="keyword" placeholder="填写楼盘关键词">
      <span class="am-input-group-btn">
        <button class="am-btn am-btn-default" type="button" id="search">搜索</button>
      </span>
    </div>
    <ul class="am-avg-sm-3 fang-margin-t">
        <li>
            <select data-am-selected="{maxHeight: 300}" id="area">
                <option value="0">区域</option>
                {volist name='area' id='val'}
                <option value="{$val.id}">{$val.name}</option>
                {/volist}
            </select>
        </li>
        <li>
            <select data-am-selected id="type">
                <option value="0">类型</option>
                {volist name='type' id='vo'}
                <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
            </select>
        </li>
        <li>
            <select data-am-selected id="year">
                <option value="0">年代</option>
                {volist name='niandai' id='vo'}
                <option value="{$key}">{$vo.name}</option>
                {/volist}
            </select>
        </li>
       
    </ul>

</div>
<div class="fang-box fang-margin-t">
    <div class="lists-news-pic">
        <ul class="am-list" id="lists" data-uri="{:url('Xiaoqu/getAjaxLists')}" data-total="{$totalpage}">
            {volist name='lists' id='vo' empty='<li>暂无数据</li>'}
            <li>
                <a href="{:url('Xiaoqu/detail',['id'=>$vo['id']])}" title="{$vo.title}" class="img"><img src="{$vo.img}" onerror="this.src='__PUBLIC__/images/nopic.jpg'" alt="{$vo.title}"></a>
                <dl>
                    <dt><a href="{:url('Xiaoqu/detail',['id'=>$vo['id']])}" title="{$vo.title}">{$vo.title}</a></dt>
                    <dd>建筑年代:{$vo.niandai}年</dd>
                    <dd>出售(<em>{$vo.second_num}</em>)套</dd>
                    <dd>地址:{$vo.address}</dd>
                </dl>
            </li>
            {/volist}
        </ul>
    </div>
</div>
<p id="loading-alt" class="am-hide">数据加载完成</p>
<script type="text/html" id="template">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}
    <li>
        <a href="{{d[i].url}}" title="{{d[i].url}}" class="img"><img src="{{d[i].img}}" onerror="this.src='__PUBLIC__/images/nopic.jpg'" alt="{{d[i].title}}"></a>
        <dl>
            <dt><a href="{{d[i].url}}" title="{{d[i].title}}">{{d[i].title}}</a></dt>
            <dd>出售(<em>{{d[i].second_num}}</em>)套</dd>
            <dd>地址:{{d[i].address}}</dd>
        </dl>
    </li>
    {{# } }}
</script>
<script>
    $(function(){
        $('#area,#year,#type').bind('change',function(){
            $('#lists').html('');
            getVal(1);
            getData();
        });
        $('#search').bind('click',function(){
            var keyword = $('#keyword').val();
            if(keyword.length == 0){
                alert('请填写关键词');
                return false;
            }
            params.area = 0;
            params.type = 0;
            params.year = 0;
            params.page  = 1;
            params.keyword = keyword;
            $('#lists').html('');
            getData();
        });
    });
    getVal(2);
    function getVal(page){
        var area=$('#area').val(),type = $('#type').val(),year = $('#year').val();
        params.area = area;
        params.type = type;
        params.year = year;
        params.page  = page;
    }
</script>
{/block}